<template>
  <div class="my">
    <!-- top -->
    <div v-if="isLogin">
      <div class="back">
        <div class="top">
          <van-image
            width="80"
            height="80"
            round
            :src="userInfo.avatar"
          />
          <div class="top-username" >
            {{userInfo.nickname}}
          </div>
          <div class="top-compile" @click="$router.push('/userinfo')">
            编辑资料
          </div>
        </div>
        <div class="bottom">
<<<<<<< HEAD
          <div class="left"  @click="$router.push('/eatle')">
            <span>1</span>
=======
          <div class="left">
            <span>{{publish_num}}</span>
>>>>>>> afd131330dce6812e756b2d50a2ff75e2b319207
            <span>头条</span>
          </div>
          <div class="right">
            <span>{{liked_num}}</span>
            <span>获赞</span>
          </div>
        </div>
      </div>
      <!-- 收藏历史 -->
      <div class="Collhistory"  @click="$router.push('/collectlist')">
        <div class="left">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shoucang"></use>
          </svg>
          <p>收藏</p>
        </div>
        <div class="right">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-history"></use>
          </svg>
          <p>历史</p>
        </div>
      </div>
      
      <div class="bottom">
        <van-cell title="修改密码" is-link />
        <van-cell title="联系我们" is-link />
        <van-cell title="关于我们" is-link />
        <van-button type="default" size="large" @click="logout"
          >退出登录</van-button
        >
      </div>
    </div>

    <div v-else>
      <div class="back">
        <div class="top">
          <van-image
            width="80"
            height="80"
            round
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <div class="top-username" @click="$router.push('/login')">
            默认名字
          </div>
          <div class="top-compile" @click="$router.push('/userinfo')">
            编辑资料
          </div>
        </div>
        <div class="bottom">
          <div class="left">
            <span>{{publish_num}}</span>
            <span>头条</span>
          </div>
          <div class="right">
            <span>{{liked_num}}</span>
            <span>获赞</span>
          </div>
        </div>
      </div>
      <!-- 收藏历史 -->
      <div class="Collhistory">
        <div class="left">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shoucang"></use>
          </svg>
          <p @click="this.$router.push('/collectlist')">收藏</p>
        </div>
        <div class="right">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-history"></use>
          </svg>
          <p>历史</p>
        </div>
      </div>
      <div class="bottom">
        <van-cell title="修改密码" is-link />
        <van-cell title="联系我们" is-link />
        <van-cell title="关于我们" is-link />
      </div>
     
    </div>
    <tFooter></tFooter>
  </div>
</template>
<script>
import tFooter from "@/components/index.vue";
import {mapMutations, mapState} from 'vuex'
export default {
  name: "my",
  data() {
    return {
      // userInfo:{}
    };
  },
  components: {
    tFooter,
  },
  created() {
// this.userInfo = JSON.parse(localStorage.getItem("tt-userInfo"))
// console.log(this.userInfo )
    // this.getuserInfo()
  },
  // 挂载后
  mounted() {},
  computed: {
    ...mapState(['uid','token','userInfo','isLogin','liked_num','publish_num']),
    ...mapMutations(['clear']),
    // isLogin() {
    //   let token = localStorage.getItem("tt-token");
    //   let uid = localStorage.getItem("tt-uid");
    //   return token && uid;
    // },
  },
  methods: {
    logout() {
      this.$dialog
        .confirm({
          title: "温馨提示",
          message: "您确定退出登录吗？",
        })
        .then((res) => {
         
            localStorage.clear()
            this.clear()

          // localStorage.removeItem("tt-token");
          // localStorage.removeItem("tt-tokenExpired");
          // localStorage.removeItem("tt-uid");
          // localStorage.removeItem("tt-username");
          // localStorage.removeItem("tt-userInfo");
          // this.$forceUpdate();
         
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang='less' scoped>
.my {
  background-color: #fafafa;
  height: 750px;
  .back {
    width: 100%;
    height: 180px;
    background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F711%2F031214121416%2F140312121416-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660205233&t=b5db3a1d8bb45896368dfcf727f0909c")
      no-repeat;
    background-size: cover;
    /*上*/
    .top {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      padding-top: 10px;
      height: 50%;
      &-username {
        color: #fff;
        font-size: 15px;
        margin-left: -60px;
      }
      &-compile {
        width: 70px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        border-radius: 15px;
        text-align: center;
        background: #fff;
        color: #999;
      }
    }
    /*下*/
    .bottom {
      display: flex;
      height: 50%;
      color: #fff;
      /*左*/
      .left {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        span {
          display: block;
          font-size: 15px;
        }
      }
      /*右*/
      .right {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        span {
          display: block;
          font-size: 15px;
        }
      }
    }
  }
  /*收藏历史*/
  .Collhistory {
    width: 100%;
    display: flex;
    padding-top: 20px;
    background: #fff;
    svg {
      width: 20px;
      height: 20px;
      color: #ffb87c;
    }
    .left {
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-right: 1px solid #f5f7f9;
    }
    .right {
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  .bottom {
    margin-top: 10px;
  }
  ::v-deep .van-button--default {
    margin-top: 10px;
    border: none;
    color: #d86262;
  }
}
</style>